<%@ page import="les.Integrante" %>

<html>
    <head>
    	<g:javascript library="prototype" />
        <meta name="layout" content="main" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <g:set var="entityName" value="${message(code: 'usuario.label', default: 'Usuario')}" />
        <title>Gerenciador - EJC</title>
        
        <g:javascript>
			function atualizarSelect(e, select, ehCirculo) {
				// The response comes back as a bunch-o-JSON
				var elementos = eval("(" + e.responseText + ")")	// evaluate JSON

				var campo = document.getElementById(select)

				// Clear all previous options
				var l = campo.length
				while (l > 0) {
					l--
					campo.remove(l)
				}

				if (elementos) {
					// Rebuild the select
					for (var i = 0; i < elementos.length; i++) {
						var elemento = elementos[i]
						var option = document.createElement('option');
						option.text = elemento.nome
						if (ehCirculo) {
							option.text = option.text + " (" + elemento.cor + ")"
						}
						option.value = elemento.id
			  			try {
			    			campo.add(option, null) // standards compliant; doesn't work in IE
			  			}
		  				catch(ex) {
		    				campo.add(option) // IE only
		  				}
					}
				}
			}
		</g:javascript>
		
    </head>
    
    <body>
    <h1>Geração de Listas</h1>
    <br/>
    <g:form action="imprimirLista" target="_blank">
   	<h2>Escolha os integrantes</h2>
   	<table>
   		<tr>
   			<th></th>
   			<th>
   				Filtro
   			</th>
   			<th>
   				Especificação
   			</th>
   		</tr>
   		<g:if test="${session.usuarioLogado?.tipo == 'Jota'}">
	   		<tr valign="middle">
	   			<td width="1">
	   				<g:radio name="filtro" value="encontro" checked="true" id="filtroEncontro"></g:radio>
	   			</td>
	   			<td>
	   				<label for="filtroEncontro"><b>Por encontro</b></label>
	   			</td>
	   			<td>
	   				Encontro: <g:select name="encontroEncontro" from="${les.Encontro.list(sort: 'id', order: 'desc')}" optionKey="id" /><br />
	   				O que mostrar: <g:select name="encontroOQueMostrar" from="${['Círculos e equipes', 'Só equipes', 'Só círculos']}" /><br />
	   				<g:checkBox name="encontroSoCoordenadores" id="encontroSoCoordenadores"></g:checkBox> <label for="encontroSoCoordenadores">Mostrar apenas coordenadores</label>
	   			</td>
	   		</tr>
	   		<tr valign="middle" bgcolor="#eeeeee">
	   			<td width="1">
	   				<g:radio name="filtro" value="equipe" id="filtroEquipe"></g:radio>
	   			</td>
	   			<td>
	   				<label for="filtroEquipe"><b>Por equipe</b></label>
	   			</td>
	   			<td>
	   				Encontro: <g:select name="equipeEncontro" id="equipeEncontro" from="${les.Encontro.list(sort: 'id', order: 'desc')}" optionKey="id" onchange="${remoteFunction(
	            																																controller:'equipe', 
	            																																action:'ajaxEquipesPorEncontro', 
	            																																params:'\'idencontro=\' + escape(this.value)', 
	            																																onComplete:'atualizarSelect(e, \'equipeEquipe\', false)')}"/><br />
	   				Equipe: <g:select name="equipeEquipe" id="equipeEquipe" /><br />
	   			</td>
	   		</tr>
			<tr valign="middle">
	   			<td width="1">
	   				<g:radio name="filtro" value="circulo" id="filtroCirculo"></g:radio>
	   			</td>
	   			<td>
	   				<label for="filtroCirculo"><b>Por círculo</b></label>
	   			</td>
	   			<td>
	   				Encontro: <g:select name="circuloEncontro" id="circuloEncontro" from="${les.Encontro.list(sort: 'id', order: 'desc')}" optionKey="id" onchange="${remoteFunction(
	            																																controller:'circulo', 
	            																																action:'ajaxCirculosPorEncontro', 
	            																																params:'\'idencontro=\' + escape(this.value)', 
	            																																onComplete:'atualizarSelect(e, \'circuloCirculo\', true)')}"/><br />
	   				Círculo: <g:select name="circuloCirculo" id="circuloCirculo" /><br />
	   			</td>
	   		</tr>
	   	</g:if>
	   	<g:else>
	   		<g:set var="integrante" value="${Integrante.findByUsuario(session.usuarioLogado)}" />
			<tr valign="middle">
	   			<td width="1">
	   				<g:radio name="filtro" value="equipe" id="filtroEquipe" checked="true"></g:radio>
	   			</td>
	   			<td>
	   				<label for="filtroEquipe"><b>Por equipe</b></label>
	   			</td>
	   			<td>
	   				Equipe: <g:select from="${integrante?.equipesQueCoordena()}" name="equipeEquipe" id="equipeEquipe" optionKey="id" /><br />
	   			</td>
	   		</tr>
	   		<tr valign="middle" bgcolor="#eeeeee">
	   			<td width="1">
	   				<g:radio name="filtro" value="circulo" id="filtroCirculo"></g:radio>
	   			</td>
	   			<td>
	   				<label for="filtroCirculo"><b>Por círculo</b></label>
	   			</td>
	   			<td>
	   				Círculo: <g:select from="${integrante?.circulosQueCoordena()}" name="circuloCirculo" id="circuloCirculo" optionKey="id" /><br />
	   			</td>
	   		</tr>
	   	</g:else>
   	</table>
   	<br />
   	<h2>Escolha os campos a mostrar</h2>
	<table>
   		<tr valign="middle">
   			<td width="60">
   				Campo 1
   			</td>
   			<td>
   				<b>Nome</b>
   			</td>
   		</tr>
   		<tr valign="middle" bgcolor="#eeeeee">
   			<td>
   				Campo 2
   			</td>
   			<td>
	   			<g:select name="campos" from="${['', 'Apelido', 'Data de nascimento', 'Idade', 'Endereço', 'Telefones', 'E-mail', 'Toca algum instrumento', 'Nomes dos pais', 'Alergia', 'Comida que não pode comer', 'Medicamento com hora marcada', 'Precisa de atenção especial', 'Equipes que já participou', 'Equipes que já coordenou', 'Círculo que coordena', 'Ano que fez EJC', 'Círculo de origem']}" />
   			</td>
   		</tr>
		<tr valign="middle">
   			<td>
   				Campo 3
   			</td>
   			<td>
	   			<g:select name="campos" from="${['', 'Apelido', 'Data de nascimento', 'Idade', 'Endereço', 'Telefones', 'E-mail', 'Toca algum instrumento', 'Nomes dos pais', 'Alergia', 'Comida que não pode comer', 'Medicamento com hora marcada', 'Precisa de atenção especial', 'Equipes que já participou', 'Equipes que já coordenou', 'Círculo que coordena', 'Ano que fez EJC', 'Círculo de origem']}" />
   			</td>
   		</tr>
   		<tr valign="middle" bgcolor="#eeeeee">
   			<td>
   				Campo 4
   			</td>
   			<td>
	   			<g:select name="campos" from="${['', 'Apelido', 'Data de nascimento', 'Idade', 'Endereço', 'Telefones', 'E-mail', 'Toca algum instrumento', 'Nomes dos pais', 'Alergia', 'Comida que não pode comer', 'Medicamento com hora marcada', 'Precisa de atenção especial', 'Equipes que já participou', 'Equipes que já coordenou', 'Círculo que coordena', 'Ano que fez EJC', 'Círculo de origem']}" />
   			</td>
   		</tr>
		<tr valign="middle">
   			<td>
   				Campo 5
   			</td>
   			<td>
	   			<g:select name="campos" from="${['', 'Apelido', 'Data de nascimento', 'Idade', 'Endereço', 'Telefones', 'E-mail', 'Toca algum instrumento', 'Nomes dos pais', 'Alergia', 'Comida que não pode comer', 'Medicamento com hora marcada', 'Precisa de atenção especial', 'Equipes que já participou', 'Equipes que já coordenou', 'Círculo que coordena', 'Ano que fez EJC', 'Círculo de origem']}" />
   			</td>
   		</tr>
   	</table>
   	<br/>
   	<input type="submit" value="Gerar lista" id="gerar">
   	</g:form>
   	
	<g:javascript>
   		// This is called when the page loads to initialize city
		var zselect = document.getElementById('equipeEncontro')
		var zopt = zselect.options[zselect.selectedIndex]
		${remoteFunction(
			controller:"equipe", 
			action:"ajaxEquipesPorEncontro", 
			params:"'idencontro=' + zopt.value", 
			onComplete:"atualizarSelect(e, 'equipeEquipe', false)")
		}
		var zselect2 = document.getElementById('circuloEncontro')
		var zopt2 = zselect.options[zselect.selectedIndex]
		${remoteFunction(
			controller:"circulo", 
			action:"ajaxCirculosPorEncontro", 
			params:"'idencontro=' + zopt.value", 
			onComplete:"atualizarSelect(e, 'circuloCirculo', true)")
		}
	</g:javascript>
    </body>
</html>